<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- viewport控制当前端口，响应式布局 -->
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>豪哥动漫-二次元人的狂欢社区</title>
    <!-- 站点图标 -->
    <link rel="shortcut icon" href="imgs/logo-3.jpg" type="image/x-icon">
    <!-- Bootstrap -->
    <link rel="stylesheet" href="lib/css/bootstrap.min.css">
    <link rel="stylesheet" href="lib/css/bootstrap-theme.css">
    <link rel="stylesheet" href="css/index.css">
</head>
  <body>
   

<!-- 头部 -->
<header id="lk_header">
<!-- 上部分 -->
    <div class="top-bar hidden-xs hidden-sm text-center text-muted" >
        <div class="container">
            <div class="row">
                <div class="col-md-2" id="top-bar-1">
                    <a>
                        <i class="icon-phone"></i>
                        <span>关注微信号</span>
                        <img src="imgs/二维码.jpg" alt="收款吗" width="120" no-repeated>
                    </a>
                </div>
                <div class="col-md-5" id="top-bar-2">
                    <i class="icon-tel"></i>
                    <span>8888-555-666(服务时间: 9:00-21:00)</span>
                </div>
                <div class="col-md-2" id="top-bar-3">
                    <i></i><span>广告合作 二次元</span>
                </div>
                <div class="col-md-3" id="top-bar-4">
                    <a href="#" role="button" class="btn btn-sm btn-register">免费注册</a>
                    <a href="#" role="button" class="btn" data-toggle="modal" data-target="#lk_login">立即登录</a>
                </div>
            </div>
        </div>

    </div>

<!-- 下部分 -->
<nav class="navbar navbar-default navbar-static-top navbar-lk">
    <div class="container">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#lk_nav" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">
            <img src="imgs/logo-3.jpg" alt="zwh" width="180" height="50px">
        </a>
      </div>
  
      <!-- 一个ul里面许多li标签里面嵌套ul或者a -->
      <div class="collapse navbar-collapse" id="lk_nav">
        <ul class="nav navbar-nav">
          <li class="active2"><a href="javascript:;">关于我们</a></li>
          <li><a href="javascript:;">网站介绍</a></li>
          <li><a href="javascript:;">热门番剧</a></li>
          <li><a href="javascript:;">番剧索引</a></li>
          <li><a href="javascript:;">私信互动</a></li>
          <li><a href="javascript:;">联系我们</a></li>
          
        </ul>
        
        <ul class="nav navbar-nav navbar-right hidden-sm hidden-xs">
          <li><a href="#">个人中心</a></li>
        </li>
        </ul>
      </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
  </nav>
</header>
<!-- /头部 -->

<!-- 轮播图 -->
<section id="lk_carousel">
  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- 指示器 -->
    <ol class="carousel-indicators">
      <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
      <li data-target="#carousel-example-generic" data-slide-to="1"></li>
      <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>
  
    <!-- 轮播内容 -->
    <div class="carousel-inner" role="listbox">
      <div class="item active" data-sm-img="imgs/td-1.jpg" data-lg-img="imgs/bz-1.jpeg">
        
      </div>
      <div class="item" data-sm-img="imgs/td-2.jpg" data-lg-img="imgs/bz-2.jpeg">
        
      </div>
      <div class="item" data-sm-img="imgs/td-3.jpg" data-lg-img="imgs/bz-3.jpeg">
        
      </div>
    </div>
  
    <!-- 控制器 -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

</section>
<!-- /轮播图 -->

<!-- 关于我们 -->
<section id="lk_about" class="hidden-xs hidden-sm">
  <!-- 标题 -->
  <div class="title text-center">
    <h1><strong>关于我们</strong></h1>
    <img src="imgs/star.jpg" alt="关于我们" class="img-responsive">
  </div>
<!-- 主要内容 -->
  <div class="container">
    <div class="row">
      <div class="col-md-8">
        <p class="text-muted"><a href="javascript:void;">无职转生:</a>  被卡车撞了的34岁童贞尼特男，醒来之后发现自己竟然身处剑和魔法的异世界！
          保留着前世记忆以婴儿姿态转生的他下定决心，这次一定不能重蹈覆辙，
          而要拿出真本事过上不会让自己后悔的生活！魔术才能绽放的他的新人生将会……？！
        </p>
        <p class="text-muted">
          <a href="javascript:void;">AngelBeates:</a> 作品主题围绕着“人生”展开，以死后的世界为舞台，讲述了反抗着命运的少男少女们的故事。
          作品中的“人生哲理”与“战斗要素”（虽然战斗要素是看点，但是战斗并不会让剧中的人物消失，也不会让他们受伤，
          当剧中的人物完成生前的遗憾后便会解脱，
          就是所谓的投胎转世，所以作品中心是围绕其对人性的体现）是其精彩看点。
        </p>
        <p class="text-muted">
          <a href="javascript:void;">re0:从零开始的异世界生活:  </a>在从便利商店回家的路上，突然被异世界召唤的少年菜月昴。在无法依靠任何东西的异世界，
          无力的少年手唯一的力量……那是“死去然后重新开始”的力量。为了守护最重要的人们，
          为了取回确实存在着又无可替代的时间，少年抗拒着绝望，勇敢地面对着残酷的命运
        </p>
      </div>
      <div class="col-md-4">
        <img src="imgs/td-3.jpg" class="img-responsive img-rounded">
      </div>
    </div>
  </div>
</section>
<!-- /关于我们 -->

<!-- 产品特色 -->
<section id="lk_product">
<div class="container">
  <div class="row">
    <!--头部选项卡 -->
    <div style="overflow: auto;">
      <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#product1" aria-controls="home" role="tab" data-toggle="tab">在线番剧</a></li>
        <li role="presentation"><a href="#product2" aria-controls="profile" role="tab" data-toggle="tab">会员专享</a></li>
        <li role="presentation"><a href="#product3" aria-controls="messages" role="tab" data-toggle="tab">优质视频</a></li>
        <li role="presentation"><a href="#product3" aria-controls="messages" role="tab" data-toggle="tab">优质视频</a></li>
        <li role="presentation"><a href="#product3" aria-controls="messages" role="tab" data-toggle="tab">优质视频</a></li>
        
        <li role="presentation"><a href="#product3" aria-controls="messages" role="tab" data-toggle="tab">优质视频</a></li>
        <li role="presentation"><a href="#product3" aria-controls="messages" role="tab" data-toggle="tab">优质视频</a></li>
        <li role="presentation"><a href="#product3" aria-controls="messages" role="tab" data-toggle="tab">优质视频</a></li>
        <li class="pull-right hidden-sm hidden-xs"><a href="#" aria-controls="settings" role="tab">更多</a></li>
      </ul>
    </div>
  <!-- 展示的内容 -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane fade in active" id="product1">
      <div class="container">
        <div class="row">
          <div class="col-md-8 pd-left">
            <div id="pd_one_1" class="media">
              
                <div class="media-left">
                  <a href="#">
                    <img class="media-object" src="imgs/二维码.jpg" alt="dm" width="140">
                  </a>
                </div>
                <div class="media-body" style="padding-top:100px ;">
                  <h5 class="media-heading text-muted">更多资讯欢迎</h5>
                  <h5 class="media-heading text-muted">关注动漫</h5>
                </div>
            </div>
            <!-- 第二部分! lead类让段落突出显示-->
            <ol id="pd_one_2" class="breadcrumb lead">
              <li><a href="#">无职转生</a></li>
              <li><a href="#">我们的重置人生</a></li>
              <li><a href="#">精灵幻想记</a></li>
              <li><a href="#">相合之物</a></li>
            </ol>
            <!-- 第三部分 -->
            <h1 id="pd_one_3">
              欢迎来到我的主场
              <strong class="text-danger">豪哥动漫</strong>
            </h1>
            <!-- 第四部分 -->
            <div id="pd_one_4">
              <button class="btn btn-primary btn-lg" type="submit" style="margin-right: 20px;">
                动漫资讯
              </button>
              <button class="btn btn-default btn-lg" type="submit">
                了解更多
              </button>
            </div>
            
          </div>
          <div class="col-md-4">
            <img src="imgs/comic-1.jpg" class="img-responsive hidden-sm hidden-xs" alt="dm">

          </div>
        </div>
      </div>
    </div>
    <div role="tabpanel" class="tab-pane" id="product2">
      <div class="container">
        <div class="row">
          <div class="col-md-4">
            <img src="imgs/comic-4.png" class="img-responsive hidden-sm hidden-xs">
          </div>
          <div id="pd_two_1" class="col-md-7 pd-left">
            <h1 class="text-warning">动漫剧场</h1>
            <p class="lead">一个中国“年轻世代”高度聚集的文化社区和视频平台。
              该网站于2009年6月创建，
              早期是一个ACG（动画、漫画、游戏）内容创作与分享的视频网站，
              现已发展成涵盖7000多个兴趣圈层的多元文化社区。
            </p>
          </div>
        </div>
      </div>

    </div>
    <div role="tabpanel" class="tab-pane" id="product3">
      <div class="container">
        <div class="row">
          <div id="pd_three_1" class="col-md-6 pd-left">
            <h1>
              <strong class="text-danger">高分动漫+热门番剧+精选好番</strong>
            </h1>
            <h3>
              引进优质番剧
              <span class="text-warning">你值得一看</span>
            </h3>
            <h4 class="text-muted" style="margin: 15px 0;">
              为了看见自己想要的生活，为了取回确实存在着又无可替代的时间。
            </h4>
            <div class="badge" style="padding: 15px 10px; cursor: pointer;">
              已引进600+部番剧，2.35亿用户
            </div>
          </div>
          <div class="col-md-6">
            <img src="imgs/bz-4.jpeg" class="img-responsive img-rounded  hidden-sm hidden-xs" alt="dm">
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
</div>

</section>
<!-- /产品特色 -->

<!-- 热门课程 -->
<section id="lk_hot">
  <!-- 标题 -->
  <div class="title text-center">
    <h1><strong>热门番剧</strong></h1>
    <img src="imgs/star.jpg" alt="关于我们" class="img-responsive">
  </div>
  <div class="container">
    <div class="row">
      <div class="lesson col-md-6">
        <div class="media">
          <div class="media-left">
            <img src="imgs/dm-1.jpg" alt="dm" class="media-object img-rounded img-thumbnail" width="100px">
          </div>
          <div class="media-body">
            <h4 class="media-heading">
              <span class="text-danger">
                鬼灭之刃
              </span>
            </h4>
            <p class="text-muted" style="margin-top: 10px;">大正时期，日本。心地善良的卖炭少年·炭治郎，有一天他的家人被鬼杀死了。而唯一幸存下来的妹妹——祢豆子变成了鬼。被绝望的现实打垮的炭治郎，为了寻找让妹妹变回人类的方法，
              决心朝着“鬼杀队”的道路前进。人与鬼交织的悲哀的兄妹的故事，现在开始！</p>
          </div>
            <div class="media-right text-danger">
              全26话
            </div>
          </div>
          <div class="media">
            <div class="media-left">
              <img src="imgs/dm-2.jpg" alt="dm" class="media-object img-rounded img-thumbnail" width="100px">
            </div>
            <div class="media-body">
              <h4 class="media-heading">
                <span class="text-danger">
                  咒术回战
                </span>
              </h4>
              <p class="text-muted" style="margin-top: 10px;">少年·虎杖悠仁原本过着普通的高中生活有一天，为了拯救被“诅咒”袭击的同伴，
                他吃下了特级咒物“两面宿傩之指”，无法回头的壮阔故事开始了——</p>
            </div>
              <div class="media-right text-danger">
                全24话
              </div>
            </div>
            <div class="media">
              <div class="media-left">
                <img src="imgs/dm-3.jpg" alt="dm" class="media-object img-rounded img-thumbnail" width="100px">
              </div>
              <div class="media-body">
                <h4 class="media-heading">
                  <span class="text-danger">
                    名侦探柯南
                  </span>
                </h4>
                <p class="text-muted" style="margin-top: 10px;">主角工藤新一原本是一位颇具名声的高中生侦探，
                  因故缩小为小学时期的模样。之后他化名为江户川柯南，寄住在女友毛利兰的父亲—侦探毛利小五郎家中，继续秘密从事追查黑暗组织的工作。
                  故事内容当中穿插许多爱情、友情、犯罪、背叛、复仇等情节。</p>
              </div>
                <div class="media-right text-danger">
                  全1106话
                </div>
              </div>
        </div>
      <div class="lesson col-md-6">
        <div class="media">
          <div class="media-left">
            <img src="imgs/dm-4.jpg" alt="dm" class="media-object img-rounded img-thumbnail" width="100px">
          </div>
          <div class="media-body">
            <h4 class="media-heading">
              <span class="text-danger">
                overload
              </span>
            </h4>
            <p class="text-muted" style="margin-top: 10px;">某天，一款曾经掀起过大热潮的VRMMORPG「YGGDRASIL」停止了运营。
              主人公铃木悟（真名）在等待系统强制登出时，意外穿越到了异世界，并且变成了拥有骷髅外表的最强魔法师——“飞鼠”。
              就这样，真正的奇幻传说正式拉开了帷幕。</p>
          </div>
            <div class="media-right text-danger">
              全13话
            </div>
          </div>
          <div class="media">
            <div class="media-left">
              <img src="imgs/dm-5.jpg" alt="dm" class="media-object img-rounded img-thumbnail" width="100px">
            </div>
            <div class="media-body">
              <h4 class="media-heading">
                <span class="text-danger">
                  欢迎来到实力至上主义的教室
                </span>
              </h4>
              <p class="text-muted" style="margin-top: 10px;">——真正的实力，平等究竟是什么？
                绫小路清隆被分配到最底层的D班。在那里，他遇见了成绩优异个性却超难搞的美少女──堀北铃音，
                和由体贴与温柔所构成，天使般的少女──栉田桔梗。与她们的相遇，使清隆的态度逐渐改变。</p>
            </div>
              <div class="media-right text-danger">
                全12话
              </div>
            </div>
            <div class="media">
              <div class="media-left">
                <img src="imgs/dm-6.jpg" alt="dm" class="media-object img-rounded img-thumbnail" width="100">
              </div>
              <div class="media-body">
                <h4 class="media-heading">
                  <span class="text-danger">
                    埃罗芒阿老师
                  </span>
                </h4>
                <p class="text-muted" style="margin-top: 10px;">高中生兼小说作家的“和泉正宗”（笔名：和泉征宗）有个家里蹲的妹妹“和泉纱雾”。一年前才成为家人的她，
                  却完全不走出居室，并也用力踩踏地板，要我帮她准备食物。
                  只是在某一天，正宗突然发现到一个冲击事实，那就是“煽情漫画老师”其实就是纱雾！？</p>
              </div>
                <div class="media-right text-danger">
                  全12话
                </div>
              </div>
      </div>
    </div>
  </div>
</section>
<!-- /热门课程 -->

<!-- 友情链接 -->
<section id="lk_link">
  <div class="title text-center">
    <h1><strong>友情链接</strong></h1>
    <img src="imgs/star.jpg" alt="友情链接" class="img-responsive">
  </div>
  <ul class="logos">
    <li><a href=""><img src="imgs/logo-1.jpg" width="100" alt=""></a></li>
    <li><a href=""><img src="imgs/logo-2.jpg" width="100" alt=""></a></li>
    <li><a href=""><img src="imgs/logo-3.jpg" width="100" alt=""></a></li>
    <li><a href=""><img src="imgs/logo-4.jpg" width="100" alt=""></a></li>
  </ul>
</section>
<!-- /友情链接 -->

<!-- 尾部 -->
<footer id="lk_footer" class="hidden-xs hidden-sm">
  <div class="container">
    <div class="row" style="padding-top: 20px;">
      <div class="col-md-3 col-md-offset-1 one">
        <div class="row">
          <ul class="col-md-6">
            <li><a href="">关于我们</a></li>
            <li><a href="">联系我们</a></li>
            <li><a href="">用户协议</a></li>
            <li><a href="">加入我们</a></li>
          </ul>
          <ul class="col-md-6">
            <li><a href="">友情链接</a></li>
            <li><a href="">网站认证</a></li>
            <li><a href="">隐私政策</a></li>
            <li><a href="">广告合作</a></li>
          </ul>
        </div>
      </div>
      <div class="col-md-3 two">
        <h5>公司地址：河南省新乡市河南科技大学</h5>
        <h5>联系电话：110110</h5>
        <h5>地址邮箱：1330349140@qq.com</h5>
      </div>
      <div class="col-md-3 three">
        <h5>联系我们：</h5>
        <a href="">
          <img class="img-circle" src="imgs/wxlogo.jpg" width="50" data-toggle="tooltip" data-placement="bottom" title="加我微信">
          <img class="img-circle" src="imgs/xllogo.jpg" width="50" data-toggle="tooltip" data-placement="bottom" title="加我新浪">
        </a>
      </div>
    </div>
  </div>
</footer>
<!-- /尾部 -->
<!-- 登录 -->
<div class="modal fade" tabindex="-1" role="dialog" id="lk_login">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">登录</h4>
      </div>
      <div class="modal-body">
        <input type="text" placeholder="请输入手机号码">
        <input type="password" placeholder="请输入密码">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">登录</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="lib/jquery/jquery-3.6.0.min.js" ></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="lib/js/bootstrap.js"></script>
<script src="js/index.js"></script>
    
  </body>
</html>